@import "variables";

$modal-border: #cccccc;

.modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.4);

	.content {
		background-color: #fefefe;
		margin: 15% auto;
		border: 1px solid $modal-border;
		width: 80%;

		&-heading{
			border-bottom: 1px solid $modal-border;
			display: flex;
			padding: 6px 10px 10px;

			.title{
				font-weight: 700;
				padding-top: 10px;
			}

			.close {
				align-self: flex-end;
				border: 1px solid #dddddd;
				color: #bbbbbb;
				margin-left: auto;
				padding: 0 8px 2px 8px;

				&:hover, &:focus {
					background-color: #eee;
					text-decoration: none;
					cursor: pointer;
				}

			}
		}

		&-body{
			padding: 10px;
		}

	}

}
